<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Kobini</title>

    <link rel="stylesheet" href="css/base.css" />
    <script src="https://js.stripe.com/v3/"></script>

    <script src="/utils.js" defer></script>
    <script src="/konbini.js" defer></script>
  </head>
  <body>
    <main>
      <a href="/">home</a>
      <h1>Konbini(コンビニ)</h1>

      <div>
        <ul>
            <li>Email: <code>{any_prefix}@{any_domain}</code><small>(Example: hanako@test.com)</small></li>
            <li>Phone Number: <code>11111111110</code></li>
            <li>Simulates a Konbini payment which succeeds after 3 minutes and the payment_intent.succeeded webhook arrives after that.</li>
        </ul>
        <ul>
            <li>Email: <code>{any_prefix}succeed_immediately@{any_domain}</code><small>(Example: succeed_immediately@test.com)</small></li>
            <li>Phone Number: <code>22222222220</code></li>
            <li>Simulates a Konbini payment which succeeds immediately and the payment_intent.succeeded webhook arrives after that.</li>
        </ul>
      </div>


      <form id="payment-form">
        <label for="name"> Name </label>
        <input id="name" value="Jenny Rosen" required />

        <label for="email"> Email </label>
        <input id="email" value="jr.succeed_immediately@example.com" required />

        <label for="phone"> Phone Number </label>
        <input id="phone" value="22222222220" required />

        <!-- Used to display form errors. -->
        <div id="error-message" role="alert"></div>

        <button type="submit">Pay</button>
      </form>

      <div id="messages" role="alert"></div>
    </main>
  </body>
</html>